<template>
  <div class="tem_parent">
    <h3>父组件A</h3>
    <p class="info">父组件给子组件绑定子组件需要的参数，在对应子组件中查看所需参数</p>
    <child-a :name-list="list1"></child-a>
    <childA :name-list="list2"></childA>
    <p>store.count：{{$store.state.count}}</p>
    <p>store.age：{{$store.state.age||'无'}}</p>
    <p>store.sex：{{$store.state.sex||'保密'}}</p>
    <ul>
      <li v-for="(item,index) in $store.state.todos" :key="item.id" @click="handleTodo(index)">
        事项：{{item.text}}
        状态：{{item.done?'已做':'待做'}}
      </li>
    </ul>
    <ul>
      <li v-for="(item,index) in dolist" :key="index">{{item.text}}</li>
    </ul>
  </div>
</template>

<script>
import childA from "./childA";
export default {
  name: "parentA",
  components:{
    childA,
  },
  data(){
    return{
      list1:['user001','user002','user003'],
      list2:['用户001','用户002','用户003'],
    }
  },
  computed:{
    dolist(){
      return this.$store.getters.doneTodos
    }
  },

  methods:{
    handleTodo(index){
      this.$store.commit('handleTodo',index)
    }
  }
}
</script>

<style scoped>
h3{
  color: blueviolet;
}
.info{
  color: #999;
}
</style>
